<template>
	<u-popup :modelValue="modelValue" mode="bottom" closeable @close="close">
		<view class="container">
			<view class="container_amount">
				￥{{payItem.amount}}
			</view>
			<view class="container_payment">
				<u-radio-group wrap v-model="value">
					<u-radio v-for="(item, index) in payList" :key="index" :name="item.value">
						<view class="u-flex u-row-between u-col-center">
							<u-image :src="item.image" width="50rpx" :height="item.height"></u-image>
							<view class="u-m-l-20">
								{{item.name}}
							</view>
						</view>
					</u-radio>
				</u-radio-group>
			</view>

			<view class="container_btn">
				<u-button type="primary" shape="circle" @click="confirm">立即支付</u-button>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		data() {
			return {
				// #ifdef MP-WEIXIN
				payList: [{
					name: '微信支付',
					image: '/static/personal/wxPay.png',
					height: '42rpx',
					value: 1
				}],
				// #endif
				// #ifndef MP-WEIXIN 
				payList: [{
						name: '微信支付',
						image: '/static/personal/wxPay.png',
						height: '42rpx',
						value: 1
					},
					{
						name: '支付宝支付',
						image: '/static/personal/zfbPay.png',
						height: '50rpx',
						value: 2
					}
				],
				// #endif
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: 1,
			}
		},
		options: {
			styleIsolation: 'shared'
		},
		emits: ["confirm", "close"],
		props: {
			modelValue: {
				type: Boolean,
				default: false
			},
			payItem: {
				type: Object,
				default: () => {}
			}
		},
		methods: {
			close() {
				this.$emit('close')
			},
			confirm() {
				this.$emit('confirm', this.value)
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 0 40rpx;
		color: #101010;
		height: 500rpx;

		&_amount {
			margin-top: 100rpx;
			text-align: center;
			color: #ff6600;
			font-size: 54rpx;
		}

		&_payment {
			margin-top: 30rpx;

			:deep(.u-radio-group) {
				width: 100%;

				.u-radio {
					flex-direction: row-reverse;
					justify-content: space-between;
					padding: 30rpx 0;
					border-bottom: 2rpx solid #f8f8f8;

					.u-radio__label {
						font-size: 28rpx !important
					}
				}
			}
		}

		&_btn {
			position: fixed;
			bottom: 40rpx;
			width: 90vw;
		}
	}
</style>